<template>
  <view class="profile">
    <view class="profile-select">
      <view class="profile-select-box">
        <image class="profile-select-img" @click="flag = 0" src="/static/tabs/girl.png" mode="" />
        <view class="profile-select-text">女宝</view>
        <image src="/static/tabs/select_ok.png" mode="" class="profile-select-icon" v-if="flag == 0" />
        <image class="profile-select-icon" src="/static/tabs/select_no.png" mode="" v-else />
      </view>
      <view class="profile-select-box">
        <image class="profile-select-img" @click="flag = 1" src="/static/tabs/boy.png" mode="" />
        <view class="profile-select-text">男宝</view>
        <image class="profile-select-icon" src="/static/tabs/select_ok.png" v-if="flag == 1" mode="" />
        <image src="/static/tabs/select_no.png" class="profile-select-icon" v-else mode="" />
      </view>
    </view>
    <view class="profile-inner">
      <view class="profile-inner-title">宝宝姓名</view>
      <input placeholder="请选择宝宝名称(必填)" class="profile-inner-input" v-model="name" type="text">
      <view class="profile-inner-title">宝宝生日</view>
      <view class="profile-inner-time">
        <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
          <view class="uni-input">{{ date }}</view>
        </picker>
      </view>
      <view class="profile-inner-text">
        <text class="tips">*</text>宝宝生日填写后不可以修改，请按照实际填写。
      </view>
      <view class="profile-inner-title">您是宝宝的</view>
      <view class="profile-inner-family">
        <view class="profile-inner-family-item " :class="{ active: babyRelation == 2 }" @click="babyRelation = 2">爸爸
        </view>
        <view class="profile-inner-family-item" :class="{ active: babyRelation == 1 }" @click="babyRelation = 1">妈妈
        </view>
        <view class="profile-inner-family-item" :class="{ active: babyRelation == -1 }" @click="babyRelation = -1">其他
        </view>
      </view>
      <view class="profile-inner-next" @click="babyadd">下一步</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { getbabyadd } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const date = ref('请选择宝宝生日(必填)')
const startDate = ref('2001-01-01')
const endDate = ref('2024-12-31')
const flag = ref(0)
const name = ref('')
const babyRelation = ref(2)
onLoad(async () => {
  getCurrentDate()
})
onShow(() => {
})
const getCurrentDate = () => {
  // 更正确的方式是使用JavaScript的Date对象
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
  const day = String(now.getDate()).padStart(2, '0'); // 补零
  // 格式化日期为YYYY-MM-DD
  endDate.value = `${year}-${month}-${day}`;
}
const bindDateChange = (e) => {
  console.log(111)
  date.value = e.detail.value
}
const babyadd = async () => {
  if (name.value == '') return uni.showToast({
    title: '请填写宝宝名称',
    icon: 'none'
  })
  if (date.value == '请选择宝宝生日(必填)') return uni.showToast({
    title: '请选择宝宝生日',
    icon: 'none'
  })
  let res: any = await getbabyadd({
    babyName: name.value,
    babyRelation: babyRelation.value,
    babySex: flag.value,
    babyBirthday: date.value
  })
  if (res.code == 0) {
    userStore.userInfo.babyId = res.data.babyId
    userStore.userInfo.nickName = name.value
    userStore.userInfo.babySex = flag.value
    userStore.userInfo.indexTitle = res.data.indexTitle
    uni.navigateBack({
      delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面  
    });
  }
}
</script>

<style lang="scss">
page {
  background-color: #F8F8F8;
}

.profile {
  &-qr {
    text-align: center;
    width: 220rpx;
    height: 48rpx;
    line-height: 48rpx;
    position: fixed;
    right: 0rpx;
    top: 8rpx;
    border-radius: 24rpx 0 0 24rpx;
    color: #60B96B;
    background: #D0F6D4;
    font-size: 26rpx;
  }

  &-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 106rpx 160rpx 44rpx 160rpx;
    background: #FFFFFF;

    &-box {
      text-align: center;
    }

    &-img {
      width: 122rpx;
      height: 122rpx;
    }

    &-text {
      margin-top: 12rpx;
      font-size: 30rpx;
      color: #A8AEB4;
    }

    &-icon {
      margin-top: 10rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }

  &-inner {
    margin-top: 40rpx;
    padding: 22rpx 0rpx 92rpx 48rpx;
    background: #FFFFFF;

    &-title {
      font-weight: 500;
      font-size: 32rpx;
      color: #2F2F2F;
      margin-bottom: 16rpx;
    }

    &-text {
      font-size: 22rpx;
      color: #494949;
      margin-top: 8rpx;
      margin-bottom: 30rpx;

      .tips {
        color: #F40606;
      }
    }

    &-family {
      display: flex;
      align-items: center;
      margin-bottom: 136rpx;

      &-item {
        width: 96rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        background: #F3F3F3;
        border-radius: 24rpx;
        font-size: 28rpx;
        margin-right: 32rpx;

        &.active {
          color: #068FEB;
          background: #C2E7FF;
        }
      }
    }

    &-next {
      font-size: 32rpx;
      color: #FFFFFF;
      width: 636rpx;
      height: 88rpx;
      margin: 0 auto;
      line-height: 88rpx;
      text-align: center;
      background: #068FEB;
      border-radius: 44rpx;
    }

    &-input {
      width: 654rpx;
      height: 76rpx;
      background: #F3F3F3;
      border-radius: 16rpx;
      margin-bottom: 30rpx;
      padding-left: 18rpx;
      font-size: 28rpx;
      color: #A0A0A0;

      &::-webkit-input-placeholder {
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }

    &-time {
      width: 654rpx;
      height: 76rpx;
      background: #F3F3F3;
      border-radius: 16rpx;
      padding-left: 18rpx;
      line-height: 76rpx;
      font-size: 28rpx;
      color: #A0A0A0;
    }
  }
}
</style>
